<template>
	<view>
		<nav-bar centerTitle='余额明细' :leftIcon='true' centerTitleColor='#fff' leftIconColor='#fff'></nav-bar>
		<image src="@/static/jifen/jifeBg.png" class="bg"></image>
		<view class="content" :style="{paddingTop:statusBarHeight}">
			<view class="block">
				<view class="tab-block">
					<view class="tab-item" @click="tabClick(-1)" :class="indexCurrent==-1?'check-item':'none-item'">
						余额明细
						<view class="item-border" v-if="indexCurrent==-1"></view>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="lowerBottom" class="scroll-class">
					<view class="item-option" v-if="lst.length>0">
						<view class="item" v-for="(item,index) in lst" :key="index">
							<!-- <image src="@/static/jifen/duihuan.png" class="icon" v-if="item.title=='兑换商品'"></image> -->
							<view class="right-info">
								<view class="hint-txt">
									<view class="txt">{{item.title}}</view>
									<view class="status-color jian">{{item.type==2?'-':'+'}}{{item.money}}
									</view>
								</view>
								<view class="date">{{item.content}}</view>
								<view class="date">{{item.createTime}}</view>
							</view>
						</view>
					</view>
					<emty v-if="lst.length==0"></emty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beginTimeShow: false,
				endTimeShow: false,
				statusBarHeight: "",
				indexCurrent: -1,
				year: 2023,
				lastMonth: 11,
				month: 11,
				lastDateStr: '',
				nowDateStr: '',
				userInfo: {},
				lst: [],
				recordParam: {
					beginTime: '1699595425000',
					endTime: '1702187425000',
					page: 0,

				},
				merchantId: '',
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 37 + 'px'
		},
		onload() {},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getList() {
				this.$http('common.blannerLst', {
					page: 0,
					size: 10,
					merchantId: this.merchantId,
					classify: 0,
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.data
						uni.setStorageSync('userInfo', res.data.data)
					}
				})
			},
			getUserInfo() {
				let that = this
				let adminId = uni.getStorageSync('adminId')
				let token = uni.getStorageSync('token')
				uni.request({
					url: 'https://api.shaoyanghmk.cn/admin/' + adminId, //仅为示例，并非真实接口地址。
					header: {
						'Token': token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						let data = res.data
						if (data.status == 0) {
							that.merchantId = data.data.merchant.id
							console.log('that.merchantId', that.merchantId)
							that.getIntegralRecordInfo()
						}
					}
				});
			},
			getIntegralRecordInfo() {
				this.$http('common.blannerLst', {
					page: this.recordParam.page,
					size: 10,
					merchantId: this.merchantId,
					classify: 0,
				}).then(res => {
					if (res.status == 0) {
						this.lst = res.data.content
						console.log('res', this.lst)
						// this.userInfo = res.data.userData
					}
				})
			},
			lowerBottom() {
				this.recordParam.page++
				this.$http('common.getIntegralRecord', {
					page: this.recordParam.page,
					size: 10,
					merchantId: this.merchantId,
					classify: 0,
				}).then(res => {
					if (res.code == 200) {
						if (res.data.data.length > 0) {
							this.lst.push(...res.data.data)
						} else {
							this.recordParam.page--
						}
						// this.userInfo = res.data.userData
					}
				})
			},
			initDate() {

				this.getIntegralRecordInfo()

			},
			tabClick(index) {
				this.indexCurrent = index
				this.recordParam.page = 0
				this.lst = []
				this.getIntegralRecordInfo()
			},
			navGo(path) {
				uni.navigateTo({
					url: path
				})
			},
			beginTimeOpen() {
				this.$refs.beginTimePickerRef.innerValue = this.recordParam.beginTime
				this.beginTimeShow = true

			},
			endTimeOpen() {
				this.$refs.endTimePickerRef.innerValue = this.recordParam.endTime
				this.endTimeShow = true
			},
			beginConfirm(e) {
				console.log('e', e)
				this.recordParam.beginTime = e.value
				this.lastDateStr = uni.$u.timeFormat(this.recordParam.beginTime, 'yyyy-mm-dd')

				this.beginTimeShow = false
				this.getIntegralRecordInfo()

			},
			endConfirm(e) {
				console.log('confirm', e);
				this.recordParam.endTime = e.value
				this.nowDateStr = uni.$u.timeFormat(this.recordParam.endTime, 'yyyy-mm-dd')

				this.endTimeShow = false
				this.getIntegralRecordInfo()

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}

				return value
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F5FC;
	}

	.bg {
		width: 750rpx;
		height: 448rpx;
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.content {
		position: relative;
		margin: 0 24rpx;
		z-index: 2;

		.card-block {
			margin-top: 50rpx;
			height: 380rpx;
			width: 100%;
			position: relative;

			.bg-two {
				width: 100%;
				height: 100%;
			}

			.card-item {
				position: absolute;
				left: 20rpx;
				right: 0rpx;
				top: 86rpx;
				bottom: 36rpx;

				z-index: 100;

				.hint-option {
					padding-bottom: 40rpx;
					border-bottom: 1rpx dashed #EFEFEF;

					.hint-txt {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.nums {
							font-size: 52rpx;
							font-weight: 700;
							color: #020B00;
						}

						.hint-block {
							width: 180rpx;
							height: 60rpx;
							background: #B6E5FF;
							border-radius: 844rpx 0rpx 0rpx 844rpx;
							display: flex;
							align-items: center;

							.icon {
								width: 25rpx;
								height: 27rpx;
								padding: 0 16rpx;
							}

							.txt {
								font-size: 24rpx;
								font-weight: 400;
								color: #0089CF;
							}
						}

					}

					.title {
						margin-top: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}

				.btn-option {
					margin-top: 44rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.cancel-btn {
						width: 248rpx;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						border-radius: 784rpx 784rpx 784rpx 784rpx;
						border: 2rpx solid #666666;
						font-size: 28rpx;
						font-weight: 400;
						color: #020B00;
					}

					.get-btn {
						width: 248rpx;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						background: linear-gradient(159deg, #42A2DE 0%, #0089CF 63%);
						border-radius: 784rpx 784rpx 784rpx 784rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}

		.check-time-block {
			margin-top: 42rpx;
			display: flex;
			align-items: center;
			margin-left: 14rpx;
			margin-right: 14rpx;

			.left-check-option {
				// flex: auto;
				display: flex;
				align-items: center;

				.txt {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					margin-right: 14rpx;
				}

			}

			.right-info-option {
				display: flex;
				align-items: center;
				flex: none;

				.txt {
					color: #666666;
					font-size: 24rpx;
				}

				span {
					font-weight: bold;
					color: #000000;
					font-size: 28rpx;
				}
			}
		}

		.scroll-class {
			height: 70vh;
		}

		.block {
			margin-top: 32rpx;
			background: #fff;
			border-radius: 16rpx;
			height: 80vh;

			.tab-block {
				display: flex;
				align-items: center;
				height: 104rpx;
				border-bottom: 1rpx solid #F4F5FC;

				.tab-item {
					width: 33%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.item-border {
						position: absolute;
						width: 36rpx;
						height: 6rpx;
						background: #0089CF;
						border-radius: 440rpx 440rpx 440rpx 440rpx;
						left: 100rpx;
						top: 60rpx;
						right: 0;
						display: flex;
						align-items: center;
					}
				}

				.none-item {
					font-size: 28rpx;
					color: #333333;
				}

				.check-item {
					font-size: 30rpx;
					font-weight: normal;
					color: #000000;
				}
			}

			.item-option {
				.item {
					height: 156rpx;
					margin: 0 24rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #EFEFEF;

					.icon {
						flex: none;
						width: 76rpx;
						height: 76rpx;
					}

					.right-info {
						flex: auto;
						margin-left: 24rpx;

						.hint-txt {
							display: flex;
							align-items: center;

							.txt {
								flex: auto;
								font-size: 30rpx;
								font-weight: bold;
								color: #020B00;
							}

							.status-color {
								flex: none;
								font-size: 30rpx;
								font-weight: 500;
								color: #0089CF;
							}

							.jian {
								font-size: 30rpx;
								font-weight: 500;
								color: #020B00;
							}
						}

						.date {
							margin-top: 16rpx;
							font-size: 24rpx;
							color: #999999;

						}
					}
				}
			}
		}
	}
</style>